<!DOCTYPE html>
<html><head>
  <meta charset="UTF-8">
  <meta http-equiv="x-UA-Compatible" content="ie=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Crafty - Crafty.WebGLShader</title>
  <link type="text/css" rel="stylesheet" href="../craftyjs-site.css">
  <link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
  <div id="header-background"> </div>
  <div id="page-frame">
  <div id="header">
    <nav class="navbar">
        <div class="container-fluid">
          <div class="navbar-header">
            <a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png"> </a>
            
        </div>
        <div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li><a href="../">首页</a></li>
            <li><a href="../getting-started/">快速开始</a></li>
            <li><a href="../documentation/">文档</a></li>
            <li><a href="../api/">API</a></li>
            <li><a href="../components/">组件</a></li>
            <li class="emph"><a href="../#install">下载</a></li>
          </ul>
        </div>
      </div>
    </nav>
  </div>


  <div id="main">
    <div id="content" class="container">
      



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">事件列表</a></li><li class="category">核心<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">动画<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">资源<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">音频<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">控制器<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">调试<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">事件<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">游戏循环<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">图形<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">输入<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">杂项<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">模型<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">场景<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">舞台<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">工具<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>Crafty.WebGLShader() <span></span></h1><div class="doclet" id="Crafty-WebGLShader"><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Crafty.WebGLShader </span><span class="sig-noun">Crafty.WebGLShader</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">vertexShaderCode</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">fragmentShaderCode</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Array </span><span class="sig-noun">attributeList</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Function </span><span class="sig-noun">drawCallback</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">e</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">entity</span></span><span class="sig-seperator">))</span></code><dl class="parameter"><dt> vertexShaderCode </dt><dd><span class="markdown"><p>对于顶点着色器的GLSL代码</p>
</span></dd></dl><dl class="parameter"><dt> fragmentShaderCode </dt><dd><span class="markdown"><p>在片段着色器的GLSL代码</p>
</span></dd></dl><dl class="parameter"><dt> attributeList </dt><dd><span class="markdown"><p>

变量名称的顶点长度列表 </p>
</span></dd></dl><dl class="parameter"><dt> drawCallback </dt><dd><span class="markdown"><p>将所有属性值映射到WebGL的函数</p>
</span></dd></dl></div><span class="markdown"><p>为组件分配或获取默认着色器。</p>
<p>这允许对组件的默认着色器进行重写，从而允许开发人员使用更复杂的着色器覆盖默认着色器行为。</p>
</span><div class="example"><h4>例子</h4><span class="markdown"><p>当我们设置一个<code>grayscale: true</code>属性时，我们想要扩展精灵来绘制一个有灰度级别的图片。</p>
<pre><code class="hljs "><span class="hljs-keyword">var</span> recoloredSprite = <span class="hljs-keyword">new</span> Crafty.WebGLShader(
  <span class="hljs-comment">// The vertex shader</span>
  <span class="hljs-string">"attribute vec2 aPosition;\n"</span> +
  <span class="hljs-string">"attribute vec3 aOrientation;\n"</span> +
  <span class="hljs-string">"attribute vec2 aLayer;\n"</span> +
  <span class="hljs-string">"attribute vec2 aTextureCoord;\n"</span> +
  <span class="hljs-string">"attribute vec2 aGrayscale;\n"</span> + <span class="hljs-comment">// Addition of our grayscale</span>
  <span class="hljs-string">"varying mediump vec3 vTextureCoord;\n"</span> +
  <span class="hljs-string">"varying mediump vec2 vGrayscale;\n"</span> + <span class="hljs-comment">// passing attribute to fragment shader</span>
  <span class="hljs-string">"uniform vec4 uViewport;\n"</span> +
  <span class="hljs-string">"uniform mediump vec2 uTextureDimensions;\n"</span> +
  <span class="hljs-string">"mat4 viewportScale = mat4(2.0 / uViewport.z, 0, 0, 0,    0, -2.0 / uViewport.w, 0,0,    0, 0,1,0,    -1,+1,0,1);\n"</span> +
  <span class="hljs-string">"vec4 viewportTranslation = vec4(uViewport.xy, 0, 0);\n"</span> +
  <span class="hljs-string">"void main() {\n"</span> +
  <span class="hljs-string">"  vec2 pos = aPosition;\n"</span> +
  <span class="hljs-string">"  vec2 entityOrigin = aOrientation.xy;\n"</span> +
  <span class="hljs-string">"  mat2 entityRotationMatrix = mat2(cos(aOrientation.z), sin(aOrientation.z), -sin(aOrientation.z), cos(aOrientation.z));\n"</span> +
  <span class="hljs-string">"  pos = entityRotationMatrix * (pos - entityOrigin) + entityOrigin ;\n"</span> +
  <span class="hljs-string">"  gl_Position = viewportScale * (viewportTranslation + vec4(pos, 1.0/(1.0+exp(aLayer.x) ), 1) );\n"</span> +
  <span class="hljs-string">"  vTextureCoord = vec3(aTextureCoord, aLayer.y);\n"</span> +
  <span class="hljs-string">"  vGrayscale = aGrayscale;\n"</span> + <span class="hljs-comment">// Assigning the grayscale for fragment shader</span>
  <span class="hljs-string">"}"</span>,
  <span class="hljs-comment">// The fragment shader</span>
  <span class="hljs-string">"precision mediump float;\n"</span> +
  <span class="hljs-string">"varying mediump vec3 vTextureCoord;\n"</span> +
  <span class="hljs-string">"varying mediump vec2 vGrayscale;\n"</span> +
  <span class="hljs-string">"uniform sampler2D uSampler;\n "</span> +
  <span class="hljs-string">"uniform mediump vec2 uTextureDimensions;\n"</span> +
  <span class="hljs-string">"void main() {\n"</span> +
  <span class="hljs-string">"  highp vec2 coord =   vTextureCoord.xy / uTextureDimensions;\n"</span> +
  <span class="hljs-string">"  mediump vec4 base_color = texture2D(uSampler, coord);\n"</span> +
  <span class="hljs-string">"  if (vGrayscale.x == 1.0) {\n"</span> +
  <span class="hljs-string">"    mediump float lightness = (0.2126*base_color.r + 0.7152*base_color.g + 0.0722*base_color.b);\n"</span> +
  <span class="hljs-string">"    lightness *= base_color.a * vTextureCoord.z; // Premultiply alpha\n"</span> +
  <span class="hljs-string">"    gl_FragColor = vec4(lightness, lightness, lightness, base_color.a*vTextureCoord.z);\n"</span> +
  <span class="hljs-string">"  } else {\n"</span> +
  <span class="hljs-string">"    gl_FragColor = vec4(base_color.rgb*base_color.a*vTextureCoord.z, base_color.a*vTextureCoord.z);\n"</span> +
  <span class="hljs-string">"  }\n"</span> +
  <span class="hljs-string">"}"</span>,
  [
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aPosition"</span>,     <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aOrientation"</span>,  <span class="hljs-attr">width</span>: <span class="hljs-number">3</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aLayer"</span>,        <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aTextureCoord"</span>, <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> },
    { <span class="hljs-attr">name</span>: <span class="hljs-string">"aGrayscale"</span>,    <span class="hljs-attr">width</span>: <span class="hljs-number">2</span> }
  ],
  <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e, entity</span>) </span>{
    <span class="hljs-keyword">var</span> co = e.co;
    <span class="hljs-comment">// Write texture coordinates</span>
    e.program.writeVector(<span class="hljs-string">"aTextureCoord"</span>,
      co.x, co.y,
      co.x, co.y + co.h,
      co.x + co.w, co.y,
      co.x + co.w, co.y + co.h
    );
    <span class="hljs-comment">// Write our grayscale attribute</span>
    e.program.writeVector(<span class="hljs-string">"aGrayscale"</span>,
      entity.grayscale ? <span class="hljs-number">1.0</span> : <span class="hljs-number">0.0</span>,
      <span class="hljs-number">0.0</span>
    );
  }
);</code></pre><p>这似乎是一个很大的工作，但上面的代码大部分是默认的Crafty着色器代码。当你掌握它的时候，很容易扩展你自己的效果。记住你只需要写一次，然后所有的精灵实体都有额外的效果。</p>
</span></div><div><h4>参见</h4><ul class="see-also-list"><li><a href="Crafty-defaultShader.html">Crafty.defaultShader</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Image.html">Image</a></li><li><a href="Color.html">Color</a></li><li><a href="WebGL.html">WebGL</a></li></ul></div></div></div></div></div>
      
    </div>
  </div>
  <div class="clearer"></div>
  <div id="footer">
    <div id="contact">
      <a href="https://groups.google.com/forum/#!forum/craftyjs">
        <img src="../images/google.png">
        google groups</a>
      <a href="mailto:starwed@gmail.com">
        <img src="../images/email.png">
        starwed@gmail.com</a>
      <a href="https://github.com/craftyjs/Crafty">
        <img src="../images/github.png">
        github</a>
    </div>
    <ul>
      <li><a href="../">首页</a></li>
        <li><a href="../getting-started/">快速开始</a></li>
        <li><a href="../documentation/">文档</a></li>
        <li><a href="../api/">API</a></li>
        <li><a href="../components/">组件</a></li>
        <li class="emph"><a href="../#install">下载</a></li>
    </ul>
    <p>
      © Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
    </p>
  </div>
</div>


</body></html>